<link rel="import" href="../../bower/polymer/polymer.html">
<link rel='import' href='../../bower/core-icons/core-icons.html'>
<link rel="import" href="button.html">

<polymer-element name='uproxy-instance' attributes='user, instance'>
  <!-- user:User (generic_ui/scripts/user.ts),
       instance:InstanceData (interfaces/social.ts)-->
  <template>
    <style>
    #wrapper.offline {
      opacity: 0.5;
    }
    #wrapper.bad_verify {
      opacity: 0.5;
      color: #600;
    }
    #wrapper.verified {
      color: #060;
    }
    #wrapper.unverified {
    }
    uproxy-button {
      font-size: 1em;
      margin: 14px 5px 5px 2px;
      padding-left: 1em;
      padding-right: 1em;
    }
    .preButtonText {
      margin: 0;
      font-size: 14px;
      color: rgba(0,0,0,0.54);
    }
    #description {
      color: #333;
      margin-bottom: 0;
    }
    core-icon[icon=query-builder] {
      height: 16px !important;
      width: 16px !important;
      color: rgba(0,0,0,0.54);
      margin-top: 2px;
      margin-right: 2px;
    }
    .verified {
      color: green;
      display: inline-block;
    }
    .notverified {
      color: red;
      display: inline-block;
    }
    .button-wrapper div {
      display: inline;
    }
    </style>

    <div id='wrapper' class='{{ instance.isOnline ? "online" : "offline" }}'>
      <p id='description' hidden?='{{ !instance.description }}'>
        <bdi style='display:inline'>{{ instance.description }}</bdi>
        <span class='verified'
              hidden?='{{ instance.verifyState != VerifyState.VERIFY_COMPLETE }}'>
          &nbsp; {{ "Verified" | $$(model.globalSettings.language) }} </span>
        <span class='notverified'
              hidden?='{{ instance.verifyState != VerifyState.VERIFY_FAILED }}'>
          {{ "FAILED VERIFICATION" | $$(model.globalSettings.language) }} </span>
        <div class='verify-code' hidden?='{{ sas === null || startedVerify }}'> SAS: {{ sas }} <br />
          <uproxy-button on-tap='{{ confirmSAS }}'>
            {{ "Confirm" }}
          </uproxy-button>
          <uproxy-button on-tap='{{ rejectSAS }}'>
            {{ "Cancel" }}
          </uproxy-button>
        </div>
      </p>
      <div hidden?='{{ !(!instance.description) }}'>
        <span class='verified' hidden?='{{ instance.verifyState != VerifyState.VERIFY_COMPLETE }}'> {{ "Verified" || $$(model.globalSettings.language) }} </span>
        <span class='notverified' hidden?='{{ instance.verifyState != VerifyState.VERIFY_FAILED }}'> {{ "FAILED VERIFICATION" || $$(model.globalSettings.language) }} </span>
        <div class='verify-code' hidden?='{{ sas === null || startedVerify }}'> (lower) SAS: {{ sas }} <br />
          <uproxy-button on-tap='{{ confirmSAS }}'>
            {{ "Confirm" }}
          </uproxy-button>
          <uproxy-button on-tap='{{ rejectSAS }}'>
            {{ "Cancel" }}
          </uproxy-button>
        </div>

      </div>
      <div id='verification' class='display:inline'
           hidden?='{{ !ENABLE_VERIFY || instance.verifyState == VerifyState.VERIFY_BEGIN }}'>
        <uproxy-button raised on-tap='{{ verify }}'>
          {{ "VERIFY" | $$(model.globalSettings.language) }}
        </uproxy-button>
      </div>

      <!-- It is assumed that all uproxy-instances are taken from
         user.offeringInstances and are therefore giving us access -->
      <div class="button-wrapper">
        <!-- not getting or trying to get access -->
        <div hidden?='{{ instance.localGettingFromRemote != GettingState.NONE }}'>
          <!-- Browsing mode -->
          <uproxy-button raised on-tap='{{ startBrowsing }}' disabled?='{{ !ui.browserApi.canProxy }}'>
            <span hidden?='{{ ui.browserApi.supportsVpn }}'>
              {{ "START_GETTING" | $$(model.globalSettings.language) }}
            </span>
            <span hidden?='{{ !ui.browserApi.supportsVpn }}'>
              {{ "START_BROWSING" | $$(model.globalSettings.language) }}
            </span>
          </uproxy-button>

          <!-- VPN mode -->
          <uproxy-button raised on-tap='{{ startVpn }}' hidden?='{{ !ui.browserApi.supportsVpn }}' disabled?='{{ !ui.browserApi.canProxy }}'>
            {{ "START_VPN" | $$(model.globalSettings.language) }}
          </uproxy-button>
        </div>

        <!-- trying to get access -->
        <div hidden?='{{ instance.localGettingFromRemote != GettingState.TRYING_TO_GET_ACCESS }}'>
          <uproxy-button class='grey' raised on-tap='{{ stop }}'>
            {{ "CANCEL" | $$(model.globalSettings.language) }}
          </uproxy-button>
        </div>

        <!-- currently getting access -->
        <div hidden?='{{ instance.localGettingFromRemote != GettingState.GETTING_ACCESS }}'>
          <uproxy-button class='grey' raised on-tap='{{ stop }}'>
            {{ "STOP_GETTING" | $$(model.globalSettings.language) }}
          </uproxy-button>
        </div>
      </div> <!-- end of button-wrapper -->
    </div> <!-- end of wrapper -->

  </template>
  <script src='instance.js'></script>
</polymer-element>
